<template>
	<el-dialog :visible.sync="dialogVisible" title="订单状态处理" width="950px" :close-on-click-modal="false" v-drag2anywhere>
		<el-form :model="detail" ref="form" label-width="110px" :rules="rules">
			<el-row>
				<el-col :span="8">
					<el-form-item label="下单时间:">{{detail.orderdate}}</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="订单编号:">{{detail.ordercode}}</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="订单类型:">{{detail.type==1? '京东自营':'京东慧采'}}</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="京东渠道:">{{detail.platform}}</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="收货信息">
            {{detail.buyerinfo.buyer}}-{{detail.buyerinfo.mobile}}-{{detail.buyerinfo.address}}
          </el-form-item>
				</el-col>
        <el-col>
          <el-form-item label="订单明细">
            <el-table :data="detail.goods" border>
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="产品名称" prop="title" ></el-table-column>
                <el-table-column label="单位" prop="unit" width="80px" align="center" ></el-table-column>
                <el-table-column label="数量" prop="count" width="80px" align="center" ></el-table-column>
                <el-table-column label="单价" prop="price"  width="100px" align="center"></el-table-column>
                <el-table-column label="总价" prop="total"  width="100px" align="center" ></el-table-column>
            </el-table>
            <div style="border:1px solid #EEEEEE; border-top: none; text-align: right; padding-right: 10px;">
                总额: <b>{{detail.amount.toFixed(2)}}</b>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单状态" prop="status">
          	<el-select v-model="detail.status" @change="handleStatusChanged">
          		<el-option label="未派单" value="0"></el-option>
          		<el-option label="已派单" value="1"></el-option>
          		<el-option label="已接单" value="2"></el-option>
              <el-option label="已取消" value="3"></el-option>
          	</el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="取消日期"  prop="canceldate">
            <el-date-picker type="date" v-model="detail.canceldate" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="订单取消原因"  prop="cancelmemo">
            <el-input type="textarea"  v-model="detail.cancelmemo" :rows="5" placeholder="请备注订单取消的原因"/>
          </el-form-item>
        </el-col>
			</el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false" size="medium">取 消</el-button>
			<el-button @click="handleSave" size="medium" type="primary">保存状态</el-button>
		</div>
	</el-dialog>
</template>

<script>
	export default {
		data(){
			return{
				index:-1,
				detail:{},
				dialogVisible:false,
				rules:{
					status:[{required:true,message:"派单状态不能为空",trigger:'blur'}],
          cancelmemo:[{required:true,message:"订单取消原因为空!",trigger:'blur'}],
          canceldate:[{required:true,message:"订单取消日期不能空!",trigger:'changed'}],
				}
			}
		},
		methods:{
			init(index, data) {
				this.index=index;
				this.detail=data;
				this.detail.status=""+this.detail.status;
        this.handleStatusChanged(this.detail.status);
			},
      handleStatusChanged(val){
        if(val==3){
          this.rules={
          	status:[{required:true,message:"派单状态不能为空",trigger:'blur'}],
            cancelmemo:[{required:true,message:"订单取消原因为空!",trigger:'blur'}],
            canceldate:[{required:true,message:"订单取消日期不能空!",trigger:'changed'}],
          }
        }else{

          this.detail.canceldate="";
          this.detail.cancelmemo="";
          this.rules={status:[{required:true,message:"派单状态不能为空",trigger:'blur'}]};
        }
      },
			handleSave(){

        this.$refs.form.validate(ok=>{
          if(ok){
            const params={
            	gwsid:this.detail.gwsid,
            	status:this.detail.status,
              cancelmemo:this.detail.cancelmemo,
              canceldate:this.detail.canceldate,
            }
            this.axios.post("api/admin/jd/order/update_status",params).then(res=>{
            	if(res.status==200 && res.data.code==0){
            		this.$message.success({message:'操作成功',duration:1500,showClose:true});
            		this.$emit("closeHandler",this.index,this.detail.status);
            		this.dialogVisible=false;
            	}else{
            		this.$message.error({message:res.data.msg,duration:1500,showClose:true});
            	}
            })
          }

        })


			}
		}
	}
</script>

<style>
</style>
